<script lang="ts" setup>
import { computed, h } from 'vue';

import { DICT_TYPE } from '@vben/constants';
import { formatDate } from '@vben/utils';

import { Card, Col, Row } from 'ant-design-vue';

import { DescriptionChange } from '#/components/description-change';
import { Image } from '#/components/image';

import DictTag from '../../../../components/dict-tag/dict-tag.vue';

interface DescriptionItemSchema {
  label: string;
  field: string;
  span: number;
  render?: (val: any) => any;
}

const props = defineProps<{ data?: any }>();
const formData = computed(() => props.data || {});

function formatDateSafe(
  date: null | string | undefined,
  format = 'YYYY-MM-DD',
) {
  if (!date) return '';
  const d = new Date(date);
  return Number.isNaN(d.getTime()) ? '' : formatDate(d, format);
}

/** 各板块 Schema 定义 */
const basicInfo = computed<DescriptionItemSchema[]>(() => [
  { label: '姓名', field: 'fullName' },
  { label: '曾用名', field: 'formerName' },
  {
    label: '性别',
    field: 'sex',
    render: (val) =>
      h(DictTag, { type: DICT_TYPE.SYSTEM_USER_SEX, value: val }),
  },
  {
    label: '民族',
    field: 'ethnicity',
    render: (val) => h(DictTag, { type: DICT_TYPE.SYSTEM_NATION, value: val }),
  },
  {
    label: '出生日期',
    field: 'birthDate',
    render: (val) => formatDateSafe(val),
  },
  { label: '籍贯', field: 'nativePlace' },
  { label: '出生地', field: 'birthPlace' },
  {
    label: '证件类型',
    field: 'cardType',
    render: (val) =>
      h(DictTag, { type: DICT_TYPE.SYSTEM_CARD_TYPE, value: val }),
  },
  { label: '证件号码', field: 'idcard' },
]);

const contactInfo = computed<DescriptionItemSchema[]>(() => [
  { label: '联系电话', field: 'mobile' },
  { label: '户籍地址', span: 24, field: 'householdAddress' },
  { label: '常住地址', field: 'currentAddress' },
  { label: '家庭地址', field: 'homeAddress' },
]);

const educationInfo = computed<DescriptionItemSchema[]>(() => [
  { label: '最高学历', field: 'highestEducation' },
  { label: '毕业院校', field: 'graduationSchool' },
  {
    label: '毕业时间',
    field: 'graduationDate',
    render: (val) => formatDateSafe(val),
  },
  { label: '专业', field: 'major' },
]);

const jobInfo = computed<DescriptionItemSchema[]>(() => [
  { label: '岗位', field: 'postId' },
  {
    label: '政治面貌',
    field: 'politicalStatus',
    render: (val) =>
      h(DictTag, { type: DICT_TYPE.SYSTEM_POLITICALINFO, value: val }),
  },
  {
    label: '入党时间',
    field: 'partyJoinDate',
    render: (val) => formatDateSafe(val),
  },
  {
    label: '参加工作时间',
    field: 'employmentDate',
    render: (val) => formatDateSafe(val),
  },
  {
    label: '从教起始时间',
    field: 'teachingStartDate',
    render: (val) => formatDateSafe(val),
  },
  {
    label: '编制类型',
    field: 'staffType',
    render: (val) => h(DictTag, { type: DICT_TYPE.PER_STAFF_TYPE, value: val }),
  },
  { label: '任教学科', field: 'teachingSubject' },
  { label: '教师资格证', field: 'teacherCertificate' },
]);

const otherInfo = computed<DescriptionItemSchema[]>(() => [
  { label: '档案号', field: 'fileNumber' },
  {
    label: '状态',
    field: 'status',
    render: (val) => h(DictTag, { type: DICT_TYPE.COMMON_STATUS, value: val }),
  },
  { label: '备注', field: 'remarks' },
  {
    label: '更新时间',
    field: 'updateTime',
    render: (val) => formatDateSafe(val),
  },
]);
</script>

<template>
  <!-- 基本信息 -->
  <Card title="基本信息" class="mb-4">
    <Row :gutter="16">
      <Col :xs="24" :md="4">
        <!-- 头像 -->
        <div class="flex justify-center">
          <Image
            v-if="formData?.photoUrl"
            :src="formData.photoUrl"
            alt="头像"
            class="h-32 w-32 rounded-lg border border-gray-200 object-contain"
          />
          <div
            v-else
            class="flex h-32 w-32 items-center justify-center rounded-lg border border-gray-200 bg-gray-100"
          >
            <span class="text-lg text-gray-400">暂无头像</span>
          </div>
        </div>
      </Col>
      <Col :xs="24" :md="20">
        <DescriptionChange
          v-if="formData"
          :info="formData"
          :schema="basicInfo"
          :change-list="formData.changeContent?.fieldChanges || []"
          :highlight-mode="formData.highlightMode"
          :change-type="formData.changeType"
          :label-width="100"
        />
      </Col>
    </Row>
  </Card>

  <!-- 联系信息 -->
  <Card title="联系与地址" class="mb-4">
    <DescriptionChange
      v-if="formData"
      :info="formData"
      :schema="contactInfo"
      :change-list="formData.changeContent?.fieldChanges || []"
      :highlight-mode="formData.highlightMode"
      :change-type="formData.changeType"
      :label-width="100"
    />
  </Card>

  <!-- 教育背景 -->
  <Card title="教育背景" class="mb-4">
    <DescriptionChange
      v-if="formData"
      :info="formData"
      :schema="educationInfo"
      :change-list="formData.changeContent?.fieldChanges || []"
      :highlight-mode="formData.highlightMode"
      :change-type="formData.changeType"
      :label-width="100"
    />
  </Card>

  <!-- 任职信息 -->
  <Card title="任职信息" class="mb-4">
    <DescriptionChange
      v-if="formData"
      :info="formData"
      :schema="jobInfo"
      :change-list="formData.changeContent?.fieldChanges || []"
      :highlight-mode="formData.highlightMode"
      :change-type="formData.changeType"
      :label-width="100"
    />
  </Card>

  <!-- 其他信息 -->
  <Card title="其他信息">
    <DescriptionChange
      v-if="formData"
      :info="formData"
      :schema="otherInfo"
      :change-list="formData.changeContent?.fieldChanges || []"
      :highlight-mode="formData.highlightMode"
      :change-type="formData.changeType"
      :label-width="100"
    />
  </Card>
</template>
